<template>
	<view class="container">
		<loading :show="loading_show && naviHeight"></loading>
		<customHead
			@scrollChange="scrollChange" 
			title="分类"
			titlePaddingLeft="30"
			@headHeight="headHeightCall"
			:navi_background="`linear-gradient(to right, ${lightColor}, ${lightColor1} 700rpx)`"
		>
			<template>
				<view class="slide_box">
					<view class="input_box" @click="searchClick">
						<u-icon name="search" size="20" :color="_temp_themeColor"></u-icon>
						<text class="text">搜索</text>
					</view>
				</view>
				<rowSlideList ref="cate_level1" :category_list="category_list_level1" @check_item="check_item_level1"></rowSlideList>
			</template>
		</customHead>
		<!-- 二级分类和三级分类 -->
		<view class="goods_main _fade" v-if="naviHeight">
			<view class="">
				<scroll-view scroll-y="true"  class="category_scroll" :show-scrollbar="true" :style="{width: `${scroll_left_width}rpx`}">
					<refresh-view :height="naviHeight" color="#a2a2a2"></refresh-view>
					<view class="category_box">
						<view class="item" v-for="(item, index) in category_list_level2" :key="index" :class="[category_index_level2 == index?'item_active':'']">
							<view class="spot" :style="{backgroundColor: category_index_level2==index?_temp_themeColor:''}" :class="[category_index_level2 == index?'spot_active':'']"></view>
							<view class="item_box">
								<view class="item_level2 _clickActive" @click="check_item_level2(item, index)">
									<text :style="{color: category_index_level2==index?_temp_themeColor:''}" :class="[category_index_level2 == index?'text_active':'']">{{item.categoryName}}</text>
								</view>
								<view class="level3_box" v-if="category_index_level2 == index">
									<view class="item_level3 _clickActive" 
										:class="[category_index_level3 == index1?'text_active':'']" 
										:style="{backgroundColor: category_index_level3==index1?_temp_themeColor:''}"
										@click="check_item_level3(item1, index1)" 
										v-for="(item1, index1) in category_list_level3" 
										:key="index1"
									>
										<text>{{item1.categoryName}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="" style="height: 188rpx;"></view>
				</scroll-view>
			</view>
			<scroll-view
				scroll-y="true" 
				class="goodsList_scroll" 
				:style="{width: `${scroll_left_width}rpx`}"
				:refresher-triggered="refresher_show"
				@refresherrefresh="refresherrefresh"
				@scrolltolower="scrolltolower"
				:scroll-with-animation="true"
				:refresher-enabled="true"
				@refresherpulling="refresherpulling"
				@refresherabort="pullDis = 0"
			 >
				<refresh-view :height="naviHeight" color="#a2a2a2"></refresh-view>
				<view class="goodsList_box _fade" v-if="goodsList.length">
					<view class="goods_item" @click="gotoDetail(item.id)" v-for="(item, index) in goodsList" :key="index">
						<view class="goodsTitle_box">
							<view class="image">
								<image :style="{width: `${imageWidth}rpx`}" :src="item.rotationImgsJson[0]" lazy-load mode="aspectFill"></image>
							</view>
							<view class="title" :style="{width: `${scroll_right_width - imageWidth - 40}rpx`}">
								<view class="title_text" :style="{color: _temp_titleColor}">{{item.goodsName}}</view>
								<view class="desc_text" :style="{color: _temp_textColor}">{{item.goodsRemarks}}</view>
								<view class="price_box">
									<view v-if="currentFirm.id">
										<span>￥</span>
										<text class="price">
											{{item.goodsPrice}}
										</text>
									</view>
									<text v-else class="price_text" :style="{color: _temp_textColor}">建店看价格</text>
									<image class="image" @click.native.stop="addCart(item)" src="@/static/images/home/cart.png" mode="aspectFill"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="" v-else>
					<u-empty
						text="暂无商品"
						mode="data"
						icon="http://cdn.uviewui.com/uview/empty/data.png"
					>
					</u-empty>
				</view>
				<view class="" style="height: 188rpx;"></view>
			</scroll-view>
		</view>
		<tabbar :current="1" :cart="totalCartNum"></tabbar>
	</view>
</template>

<script>
	import { searchPlugsGoodCategoryList, searchPlugsGoodsByCategoryId } from '@/tools/request/api.js'
	import { makeContrast, makeLightColor } from '@/tools/utils/colorful.js'
	import { mapState, mapActions, mapMutations } from 'vuex'
	export default {
		data() {
			return {
				unfold_show: false,
				loading_show: false,
				refresher_show: false,
				goodsList: [],
				category_list_level1: [],
				category_list_level2: [],
				category_list_level3: [],
				category_index_level1: 0,
				category_index_level2: 0,
				category_index_level3: 0,
				hasChildrenCate: true,
				currentId: 0,
				goodsPage: 1,
				totalPage: 0,
				pullDis: 0,
				scroll_left_width: 170,
				scroll_right_width: 580,
				imageWidth: 160,
				cate_item_id: ''
			};
		},
		onLoad () {
			this.IS_BUSINESS_DONE((res) => {
				this.getCategoryList();
			})
		},
		onShow () {
			this.setCategoryLevel1();
		},
		onHide () {
			uni.removeStorageSync('categoryItemId');
		},
		computed: {
			lightColor () {
				let light_color = makeLightColor(this._temp_themeColor, 0.7);
				return light_color;
			},
			lightColor1 () {
				let light_color = makeLightColor(this._temp_themeColor, 0.9);
				return light_color;
			}
		},
		methods: {
			...mapMutations('business_store', ['IS_BUSINESS_DONE']),
			gotoAddStore () {
				uni.navigateTo({
					url: '/subpack_my/myStore/myStore'
				})
			},
			searchClick () {
				uni.navigateTo({
					url: '../../subpack_home/search/search'
				})
			},
			gotoDetail (id) {
				if (!this.currentFirm.id) return this.gotoAddStore();
				uni.navigateTo({
					url: `/subpack_category/goodsDetail/goodsDetail?id=${id}`
				})
			},
			addCart (item) {
				if (!this.currentFirm.id) return this.gotoAddStore();
				this.addCartGoods(item);
			},
			// 设置滚动宽度
			setScrollWidth () {
				if (this.category_list_level2.length) {
					this.scroll_left_width = 170;
					this.scroll_right_width = 580;
				} else {
					this.scroll_left_width = 0;
					this.scroll_right_width = 750;
				}
			},
			// 一级分类点击事件
			check_item_level1 (item, index) {
				this.category_index_level3 = 0;
				this.category_index_level2 = 0;
				this.goodsList = [];
				this.goodsPage = 1;
				this.filterCategory_level2(item, 0);
			},
			// 二级分类点击事件
			check_item_level2 (item, index) {
				if (this.category_index_level2 === index) return;
				this.category_index_level2 = index;
				this.category_index_level3 = 0;
				this.goodsList = [];
				this.goodsPage = 1;
				this.filterCategory_level3(item, 0);
			},
			// 三级分类点击事件
			check_item_level3 (item, index) {
				if (this.category_index_level3 === index) return;
				this.category_index_level3 = index;
				this.goodsList = [];
				this.goodsPage = 1;
				this.getGoodsList(item.id);
			},
			// 提取二级分类
			filterCategory_level2 (item, index) {
				let list = item.pgoodCategoryList;
				this.category_list_level2 = list;
				this.setScrollWidth();
				if (list.length === 0) {
					this.getGoodsList(item.id)
					return;
				};
				this.filterCategory_level3(this.category_list_level2[index], 0);
			},
			// 提取三级分类
			filterCategory_level3 (item, index) {
				let list = item.pgoodCategoryList;
				this.category_list_level3 = list;
				if (list.length === 0) {
					this.getGoodsList(item.id)
				} else {
					let id = this.category_list_level3[index].id;
					this.getGoodsList(id)
				}
			},
			// 根据分类id获取商品列表
			getGoodsList (id) {
				id = id.toString();
				this.loading_show = true;
				let data = {
					page: this.goodsPage,
					size: 10,
					businessId: '-1',
					categoryId: id
				};
				searchPlugsGoodsByCategoryId(data).then(res => {
					this.loading_show = false;
					if (res.code == 200) {
						this.totalPage = res.body.pages;
						let list = res.body.list;
						list.forEach((item) => {
							if (item.rotationImgsJson) {
								item.rotationImgsJson = JSON.parse(item.rotationImgsJson);
							}
						})
						if (this.refresher_show) {
							this.goodsList = list;
						} else {
							this.goodsList = this.goodsList.concat(list);
						}
						this.refresher_show = false;
					} else {
						uni.showToast({
							title: '加载数据失败',
							duration: 1000,
							icon: 'none'
						})
					}
					this.currentId = id;
				})
			},
			// 获取商品分类列表
			getCategoryList () {
				this.loading_show = true;
				let data = {
					page: 1,
					size: 100,
					adminId: this.adminId,
					id: 143,
					keyword: '',
					businessId: this.businessId,
					userServiceToken: this.userServiceToken
				}
				searchPlugsGoodCategoryList(data).then(res => {
					this.loading_show = false;
					if (res.code == 200) {
						let cateList = res.body.list;
						if (!cateList.length) return;
						cateList.sort((a, b) => {
							if (a.pgoodCategoryList.length) {
								return -1;
							}
						})
						
						this.category_list_level1 = cateList;
						// let childCate = this.getAllChildrenCate(cateList);
						// console.log(childCate, 'childCate');
						this.setCategoryLevel1();
						this.filterCategory_level2(this.category_list_level1[0], 0);
					} else {
						uni.showToast({
							title: '加载数据失败',
							duration: 1000,
							icon: 'none'
						})
					}
				})
			},
			// 提取出所有最低级分类
			getAllChildrenCate (cateList) {
				let childList = [];
				function handle (list) {
					for (let i = 0; i < list.length; i++) {
						if (list[i].pgoodCategoryList.length) {
							handle(list[i].pgoodCategoryList);
						} else {
							childList.push(list[i]);
						}
					}
				}
				handle(cateList);
				return childList;
			},
			// 设置默认选中的一级分类
			setCategoryLevel1 () {
				if (this.category_list_level1 && !this.category_list_level1.length) return;
				let categoryItemId = uni.getStorageSync('categoryItemId');
				if (!categoryItemId) return;
				this.cate_item_id = categoryItemId;
				let currentIndex = 0;
				let currentItem = {};
				this.category_list_level1.forEach((item, index) => {
					if (item.id.toString() === this.cate_item_id) {
						currentIndex = index;
						currentItem = item;
					}
				})
				if (!currentItem.id) return;
				this.$refs.cate_level1.clickItem(currentItem, currentIndex);
			},
			
			// 滚动到底部加载更多
			scrolltolower () {
				if (this.goodsPage >= this.totalPage) return
				this.goodsPage++;
				this.getGoodsList(this.currentId);
			},
			// 下拉刷新
			refresherrefresh () {
				this.refresher_show = true;
				this.goodsPage = 1;
				this.getGoodsList(this.currentId);
			},
			refresherpulling (e) {
				if (e.detail.dy >= 54) return;
				this.pullDis = e.detail.dy;
			},
		},
		
	}
</script>

<style lang="scss" scoped>
	.container{
		width: 100vw;
		height: 100vh;
		
		.slide_box{
			width: 100%;
			padding: 0 20rpx;
			padding-bottom: 20rpx;
			box-sizing: border-box;
			height: 84rpx;
			
			.input_box{
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
				display: flex;
				justify-content: center; 
				align-items: center;
				background-color: #fff;
				
				.text{
					font-size: 26rpx;
					color: #9f9f9f;
				}
			}
		}
		
		
		
		
		
		.goods_main{
			display: flex;
			box-sizing: border-box;
			
			.category_scroll{
				height: 100vh;
				width: 170rpx;
				background-color: #f3f3f3;
				
				.category_box{
					width: 100%;
					
					.refresh_view{
						width: 100%;
						height: 270rpx;
					}
					
					.item_active{
						background-color: #fff;
						border-bottom-right-radius: 20rpx;
						border-bottom-left-radius: 20rpx;
					}
					
					.item{
						width: 100%;
						display: flex;
						padding: 26rpx 0;
						
						.spot{
							width: 10rpx;
							margin-right: 10rpx;
							border-bottom-right-radius: 12rpx;
							border-top-right-radius: 12rpx;
						}
						.spot_active{
							// background-color: $theme-color;
						}
						.item_box{
							flex: 1;
							// width: 150rpx;
							position: relative;
							overflow: hidden;
							
							.item_level2{
								height: 66rpx;
								display: flex;
								align-items: center;
								font-size: 28rpx;
								color: #4f4f4f;
								
								.text_active{
									// color: $theme-color;
								}
							}
							@keyframes show {
								from{
									transform: translateX(-100%);
								} to {
									transform: translateX(0);
								}
							}
							.level3_box{
								width: 100%;
								position: relative;
								transform: translateX(-100%);
								animation-name: show;
								animation-duration: 0.4s;
								animation-fill-mode: forwards;
								
								.item_level3{
									width: 90%;
									height: 56rpx;
									text-align: center;
									line-height: 56rpx;
									font-size: 24rpx;
									color: #838383;
									margin-top: 20rpx;
									margin-bottom: 20rpx;
									border-radius: 10rpx;
									overflow: hidden;
									white-space: nowrap;
									text-overflow: ellipsis;
									padding: 0 4rpx;
									box-sizing: border-box;
								}
								.text_active{
									color: #fff;
								}
							}
						}
					}
				}
			}
			.goodsList_scroll{
				// width: 580rpx;
				flex: 1;
				height: 100vh;
				box-sizing: border-box;
				border-left: 1rpx solid #ddd;
				
				@keyframes show {
					from{
						transform: translateX(-100%);
						opacity: 0;
					} to {
						transform: translateX(0);
						opacity: 1;
					}
				}
				
				.goodsList_box{
					width: 100%;
					box-sizing: border-box;
					border-left: 1rpx solid #ddd;
					background-color: #fff;
					border-bottom-left-radius: 20rpx;
					border-bottom-right-radius: 20rpx;
					// animation-name: show;
					// animation-duration: 0.2s;
					// animation-fill-mode: forwards;
					
					.goods_item{
						width: 100%;
						border-bottom: 1rpx solid #e6e6e6;
						padding: 0 20rpx;
						box-sizing: border-box;
					
						.goodsTitle_box{
							width: 100%;
							display: flex;
							align-items: center;
							
							.image{
								width: 160rpx;
								height: 160rpx;
								border-radius: 20rpx;
								
								image{
									width: 100%;
									height: 100%;
									border-radius: 20rpx;
								}
							}
							
							.title{
								display: flex;
								flex-direction: column;
								padding: 20rpx 0;
								padding-left: 20rpx;
								box-sizing: border-box;
								
								.title_text{
									width: 100%;
									padding: 20rpx 0;
									overflow: hidden;
									white-space: nowrap;
									text-overflow: ellipsis;
								}
								.desc_text{
									width: 100%;
									color: #535353;
									font-size: 28rpx;
									overflow: hidden;
									white-space: nowrap;
									text-overflow: ellipsis;
								}
								.price_box{
									width: 100%;
									margin-top: 20rpx;
									display: flex;
									justify-content: space-between;
									align-items: center;
									
									span{
										font-size: 30rpx;
										color: #FF0000;
									}
									
									.price{
										font-size: 34rpx;
										color: #FF0000;
										font-weight: bold;
									}
									
									.image{
										width: 50rpx;
										height: 50rpx;
									}
									
									.price_text{
										
									}
									
								}
								// .image_box{
								// 	display: flex;
								// 	justify-content: flex-end;
									
								// 	.image{
								// 		width: 40rpx;
								// 		height: 40rpx;
								// 	}
								// }
									
							}
						}
						.goodsSpecification_box{
							display: flex;
							padding: 20rpx 0;
							margin-left: 40rpx;
							
							.image{
								width: 120rpx;
								height: 120rpx;
								border-radius: 20rpx;
								
								image{
									width: 100%;
									height: 100%;
									border-radius: 20rpx;
								}
							}
							.title{
								flex: 1;
								display: flex;
								flex-direction: column;
								padding-left: 20rpx;
								box-sizing: border-box;
								
								.title_text{
									padding: 20rpx 0;
								}
								.desc{
									color: #9a9a9a;
									font-size: 26rpx;
									display: flex;
									justify-content: space-between;
									padding-right: 30rpx;
									box-sizing: border-box;
									
									.image{
										width: 50rpx;
										height: 50rpx;
									}
								}
							}
						}
					}
					.goods_item:last-child{
						border: none;
					}
				}
			}
		}
	}
</style>
